<template>
  <div class="the-fast-box">
    <div class="title" v-if="pos=='1'">
      <span>综合实力</span>
      <img src="/images/wuli/right/综合实力-on.png">
    </div>
    <div class="title" v-if="pos=='2'">
      <div v-for="(item,index) in titles" :key="item" class="titles" @click="handleTitle(index)">
        <span style="width:88.8px">{{item}}</span>
        <img v-if="now_title==index" src="/images/wuli/right/5个按钮-on.png" style="width:88.8px;">
        <img v-else src="/images/wuli/right/5个按钮-off.png" style="width:88.8px;">
      </div>
    </div>
    <!-- <div v-show="!isOk" class="no_data">正在加载，请稍等...</div> -->

    <div  class="gs-lists content"  @mouseenter="enter" @mouseleave="leave">
    <!-- basic3 会把id传出来 -->
      <!-- <basic3 v-for="(item,index) in current_info" :key="index" :detail="item" :index="index+1"></basic3> -->
      <basic3 v-for="(item,index) in info" :key="index" :detail="item" :index="index+1"></basic3>
    </div>
  </div>
</template>

<script>
import basic3 from './basic3.vue'

export default {
  name: '',
  components: {
    basic3
  },
  props: {
    pos: {
      type: [Number, String],
      required: true
    },
    field: {
      type: String,
      required: true
    },
    location: {
      type: String,
      required: true
    },
    searchname: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      titles: ['基础实力','市场拓展','产品创新', '社会影响', '风险控制'],
      normGuids: ["0","1","2","3","4"],
      now_title: 0,
      initInterval: null,
      info: [],
      current_info: [],
      total: 0,
      countOfRender: 0,
      n: 0,
      isOk: false,
      page: 0,
      over: false,
      pagesize: 10,
      scrollNum: 0
    }
  },
  computed: {},
  watch: {
    field: function (){
      console.log('right的field更新为 ', this.field)
      if(this.pos=='1'){
        // 默认：综合实力
        this.getRight(0,0)
      } else {
        // 默认：基础实力
        this.getRight(this.normGuids[0],0)
      }
    },    
    location: function (){
      console.log('right的location更新为 ',this.location)
      if(this.pos=='1'){
        // 默认：综合实力
        this.getRight(0,0)
      } else {
        // 默认：基础实力
        this.getRight(this.normGuids[0],0)
      }
    },
    searchname: function (){
      console.log('right的searchname更新为 ',this.searchname)
      if(this.pos=='1'){
        // 默认：综合实力
        this.getRight(0,0)
      } else {
        // 默认：基础实力
        this.getRight(this.normGuids[0],0)
      }
    }
  },
  activated(){
    this.getNumb(this.scrollNum)
    console.log(this.titles[this.now_title],'activated')
    // var parentDoms = document.getElementsByClassName('content') //获取滚动元素
    // let parentDom = parentDoms[this.pos-1]
    // console.log('前：',parentDom.scrollTop)
    this.leave()
  },
  deactivated(){
    console.log(this.titles[this.now_title],'deactivated')
    // var parentDoms = document.getElementsByClassName('content') //获取滚动元素
    // let parentDom = parentDoms[this.pos-1]

    this.enter()
  },
  created () {},
  mounted () {
    if(this.pos=='1'){
      // 默认：综合实力
      this.getRight(0,0)
    } else {
      // 默认：基础实力
      this.getRight(this.normGuids[0],0)
    }
    var parentDoms = document.getElementsByClassName('content') //获取滚动元素
    let parentDom = parentDoms[this.pos-1]
    parentDom.onscroll = () => {
      this.scrollNum = parentDom.scrollTop
      // console.log(parentDom.scrollTop,parentDom.clientHeight,parentDom.scrollHeight)
      // 正在请求数据
      if (!this.over){
        if(parentDom.scrollHeight - parentDom.scrollTop - parentDom.clientHeight <= 140){
          if(!this.isOk){
            // console.log('xxxxxx')
            return
          }else{
            this.isOk = false
            this.page ++
            console.log(`${this.pos} 当前请求第 ${this.page} 页`)
            this.leave()
            // this.debounce(this.getRight(this.normGuids[this.now_title],this.page),6000,true)
            this.getRight(this.normGuids[this.now_title],this.page)
          }
        }
      }
    }
    
  },
  methods: { 
    getNumb(num=0){
      let parentDoms = document.getElementsByClassName('content') //获取滚动元素
      let parentDom = parentDoms[this.pos-1]
      if(parentDom){
        console.log('原值为：',parentDom.scrollTop)
        if(num!=0){
          parentDom.scrollTop = num
          // console.log('已设定为：',parentDom.scrollTop)
        }
        return parentDom.scrollTop
      }
    },
    async getRight(normGuid,page){
      if(page==0){
        this.info = []
        this.over = false
        console.log('已重置info')
        this.page = 0
        var parentDoms = document.getElementsByClassName('content') //获取滚动元素
        let parentDom = parentDoms[this.pos-1]
        parentDom.scrollTop = 0
      }
      // console.log(`${this.pos} 当前请求第 ${this.page} 页`)
      // this.isOk = false
      let url,detail
      if(this.pos=='1'){
        url = '/dcockpit/rest/nbCockpitApi/getcomprehensivelist'
        detail = {
          mappingname: this.field,
          provincecode:"",
          citycode: "",
          first: this.page,
          pagesize: this.pagesize,
          companysname: this.searchname
        }
      }else{
        url = '/dcockpit/rest/nbCockpitApi/getfivepowerdetaillist'
        detail = {
          fivepowerflag: normGuid,
          mappingname: this.field,
          provincecode: "",
          citycode: "",
          first: this.page,
          pagesize: this.pagesize,
          companysname: this.searchname
        }
      }
      let x
      if(this.location=='浙江省'){
        detail.provincecode = "330000"
        x = await this.$api.post(url, detail).then((res) => {
          this.after(res)
        })
        
      }else if(this.location=='宁波市'){
        detail.citycode = "330200"
        x = await this.$api.post(url, detail).then((res) => {
          this.after(res)
        })
        
      }else{
        x = await this.$api.post(url, detail).then((res) => {
          this.after(res)
        })
        
      }
    },
    after(x){
      this.isOk = true
      if(x.status!='1'){
        alert('右侧数据获取失败')
        return
      }
      let {custom:{list}}={...x}
      this.total = list.length

      if(this.total < this.pagesize){
        console.log(this.total ,this.pagesize)
        this.over = true
      }
      this.info = this.info.concat(list)
      console.log(`${this.pos} 返回第 ${this.page} 页`,list)
      this.autoScroll(100)
    },
    handleTitle(index){
      this.page = 1
      this.now_title = index
      this.info = []
      // clearInterval(this.initInterval)
      this.enter()
      this.initInterval = null
      try {
        this.getRight(this.normGuids[index],0)
      } catch (error) {
        alert(error)
        console.log(error)
      }
    },
    autoScroll(interval) {
      var parentDoms = document.getElementsByClassName('content') //获取滚动元素
      let parentDom = parentDoms[this.pos-1]
      if(parentDom){

        // console.log(parentDom.scrollTop, parentDom.clientHeight, parentDom.scrollHeight)
        this.enter()
        this.initInterval = setInterval(() => {
          // 判断元素是否滚动到底部(距离顶部 + 可视高度 = 整个高度)
          // 滚上去了多少 + client里的高度 >= 总高度
          if (parentDom.scrollTop + parentDom.clientHeight >= parentDom.scrollHeight) {
            if(this.over){
              console.log('滚到底了')
              parentDom.scrollTop = 0
            }else{
              parentDom.scrollTop += 1
            }
          } else {
            parentDom.scrollTop += 2 // 元素自增距离顶部
          }
          // console.log(parentDom.scrollTop, parentDom.clientHeight, parentDom.scrollHeight)
  
        }, interval)
      }

    },
    enter(){
      if (this.initInterval) {
        clearInterval(this.initInterval);
        this.initInterval = null;
        console.log('定时器消除成功',this.initInterval)
      }
    },
    leave(){
      if (this.initInterval) {
        return 
      }
      this.throttle(this.autoScroll(100))
    },
    throttle(fn, delay=200) {
      let timer = null
      return function (...args) {
        if (!timer) {
          timer = setTimeout(() => {
            fn.apply(this, args)
            timer = null
          }, delay)
        }
      }
    },
    debounce(fn, delay=200, immediate=false){
      console.log('debounce', this.page)
      let timer = null
      
      return function(...args){
        if (timer) clearTimeout(timer)
        if (immediate) {
          let callNow = !timer
          timer = setTimeout(() => {
            timer = null
          }, delay)
          if (callNow) fn.apply(this, args)
          
        } else {
          timer = setTimeout(() => {
            fn.apply(this, args)
          }, delay)
        }
        
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.the-fast-box {
  margin-bottom: 40px;

  .title {
    position relative;
    height: 44px;
    border-bottom: 1px solid rgba(0, 216, 255, 1);
    width: 444px;
    img {
      z-index: -1;
      position absolute;
      top: 0;
      left: 0;
      width: 168px;
      height: 44px;
    }
    span {
      display: inline-block;
      font-size: 16px;
      line-height: 44px;
      height: 44px;
      width: 168px;
      color: #FFFFFF;
      font-weight: 400;
      text-align: center;
    }
  }
  .titles {
    border: 0;
    display: inline-block;
    position relative;
    cursor: pointer;
  }
  .gs-lists {
    box-sizing: border-box;
    width: 100%;
    height: 325px;
    padding-left: 57px;
    overflow-y: auto;
    overflow-x: hidden;

  }
  .gs-lists::-webkit-scrollbar {
    display: none;
  }
}
.click-style {
  background-image: url('/images/wuli/选中底.png');
  background-size: 100%;
}
.no_data {
  color: #fff;
  height: 325px;
  width: 100%;
  text-align: center;
  line-height: 300px;
  letter-spacing: 3px;
  opacity: 0.8;
}
</style>
